<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
            <title></title>
            <script src="http://assets.cjkt.com/js/jquery.min.js"></script>
            <link rel="stylesheet" type="text/css" href="iconfont.css" />
            <style type="text/css">
                body {
                    padding: 0;
                    margin: 0;
                }
            
            .col-3 {
                display: inline-block;
                width: 34%;
            }
            .col-2 {
                display: inline-block;
                width: 22%;
            }
            
            .bg-white {
                background-color: #fff;
            }
            
            .bg-gray {
                background-color: #f1f5f6;
            }
            
            .fs-12 {
                font-size: 12px;
            }
            
            .text-center {
                text-align: center;
            }
            
            .icon-box {
                position: relative;
                display: inline-block;
                line-height: 20px;
                font-size: 14px;
                padding-left: 10px;
                padding-right: 5px;
            }
            
            .icon-box .iconfont {
                position: absolute;
                left: 0;
                top: 50%;
                -webkit-transform: translate(0, -50%);
                transform: translate(0, -50%);
                margin-left: -10px;
                font-size: 15px;
                line-height: 1;
                color: #00b7ee;
            }
            
            .p-15 {
                padding: 15px;
            }
            
            .answer {
                border-radius: 5px;
                border: 1px solid #ececec;
                padding-left: 63px;
                padding-top: 20px;
                padding-bottom: 20px;
                padding-right: 16px;
                position: relative;
                margin-bottom: 20px;
            }
            
            .answer .box {
                position: absolute;
                background-color: #efefef;
                top: 0;
                left: 0;
                width: 47px;
                height: 100%;
                border-top-left-radius: 5px;
                border-bottom-left-radius: 5px;
            }
            
            .answer .img {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 26px;
                height: 26px;
                -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            }
            
            .answer-a .img {
                background: url(choice_a_blue.png) no-repeat;
                background-size: cover;
            }
            
            .answer-a.active .img,
            .answer-a.wrong .img,
            .answer-a.right .img {
                background: url(choice_a_white.png) no-repeat;
                background-size: cover;
            }
            
            .answer-b .img {
                background: url(choice_b_blue.png) no-repeat;
                background-size: cover;
            }
            
            .answer-b.active .img,
            .answer-b.wrong .img,
            .answer-b.right .img {
                background: url(choice_b_white.png) no-repeat;
                background-size: cover;
            }
            
            .answer-c .img {
                background: url(choice_c_blue.png) no-repeat;
                background-size: cover;
            }
            
            .answer-c.active .img,
            .answer-c.wrong .img,
            .answer-c.right .img {
                background: url(choice_c_white.png) no-repeat;
                background-size: cover;
            }
            
            .answer-d .img {
                background: url(choice_d_blue.png) no-repeat;
                background-size: cover;
            }
            
            .answer-d.active .img,
            .answer-d.wrong .img,
            .answer-d.right .img {
                background: url(choice_d_white.png) no-repeat;
                background-size: cover;
            }
            
            .answer.active {
                border-color: #00b7ee;
            }
            
            .answer.active .box {
                background-color: #00b7ee;
            }
            
            .answer.wrong {
                border-color: #ff7272;
            }
            
            .answer.wrong .box {
                background-color: #ff7272;
            }
            
            .answer.right {
                border-color: #47e097;
            }
            
            .answer.right .box {
                background-color: #47e097;
            }
            
            .answer.right .mark {
                position: absolute;
                background: url(right.png) no-repeat;
                background-size: cover;
                width: 33px;
                height: 32px;
                right: -10px;
                bottom: -10px;
            }
            
            .answer.wrong .mark {
                position: absolute;
                width: 29px;
                height: 30px;
                right: -10px;
                bottom: -12px;
                background: url(wrong.png) no-repeat;
                background-size: cover;
            }
            .detail{
                display: none;
            }
            .btn{
                display: inline-block;
                font-size: 15px;
                border-radius: 5px;
                border: 1px solid #00b7ee;
                background-color: #fff;
                color: #00b7ee;
                width: 93px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                margin-left: 10px;
                margin-right: 10px;
            }
            .btn.btn-blue{
                color: #fff;
                background-color: #00b7ee;
            }
            .confirm{
                display: none;
            }
            .next{
                display: none;
            }
            .iconimg{
                display: inline-block;
                width:16px;
                height:16px;
                margin-right:5px;
                position: absolute;
                left: 0;
                top: 50%;
                -webkit-transform: translate(0, -50%);
                transform: translate(0, -50%);
                margin-left: -10px;
                
            }
            img{display:block;max-width:100%}
            #MathJax_Message{display:none}
            .level-img img{
                display: none;
                width:16px;
                margin-right:5px;
                position:relative;
                top:2px;
            }
            .level-img{
                vertical-align: middle;
            }
            </style>
            <script src="http://assets.cjkt.com/js/mathjax/MathJax.js?config=TeX-AMS-MML_SVG"></script>
            <script>
                MathJax.Hub.Config({
                                   //config:["TeX-AMS-MML_HTMLorMML.js"],
                                   MMLorHTML: { prefer: { Firefox: "MML" } },
                                   tex2jax: {
                                   inlineMath: [['$','$'], ['\\(','\\)']],
                                   processEscapes: false
                                   },
                                   TeX: {
                                   equationNumbers: {
                                   autoNumber: ["AMS"],
                                   useLabelIds: true
                                   }
                                   },
                                   "HTML-CSS": {
                                   linebreaks: {
                                   automatic: true
                                   },
                                   scale: 85
                                   },
                                   SVG: {
                                   linebreaks: {
                                   automatic: true
                                   }
                                   }
                                   });
                                   window.updateMath = function (elementID) {
                                       MathJax.Hub.Queue(["Typeset", MathJax.Hub, elementID]);
                                   };
            </script>
            </head>
    
    <body>
        <div class="bg-white fs-12 text-center" style="height: 47px;line-height: 47px;background-color: #f2f3f8;">
            <div class="col-2">
                <div class="icon-box"><span class="level-img"><img class="qingsong-img" src="qingsong.png" alt=""><img class="jiandan-img" src="jiandan.png" alt=""><img class="kunnan-img" src="kunnan.png" alt=""><img class="fengkuang-img" src="fengkuang.png" alt=""></span><span class="level">轻松</span></div>
            </div><div class="col-2">
                <div class="icon-box"><img class="iconimg" src="jifenicon.png"><span class="jifen">0/0</span></div>
            </div><div class="col-2">
                <div class="icon-box"><span class="iconfont icon-shichang"></span><span class="time">00:00:0</span></div>
            </div><div class="col-3">
                <div class="icon-box"><img class="iconimg" src="ringtrate.png"><span class="rate">正确率0%</span></div>
            </div>
        </div>
        <div id="showMath" class="bg-white p-15" style="font-size: 16px;line-height: 1.5; position:relative">
            <div class="bg-img" style="width: 116px;height: 42px;background-size: cover;position: absolute;right: 20px;top: 20px;display:none"></div>
            <div class="question" style="margin-bottom: 25px;"></div>
            <div class="answer answer-a">
                <div class="box"><span class="mark"></span><span class="img"></span></div><div class="answer-content"></div></div>
            <div class="answer answer-b">
                <div class="box"><span class="mark"></span><span class="img"></span></div><div class="answer-content"></div></div>
            <div class="answer answer-c">
                <div class="box"><span class="mark"></span><span class="img"></span></div><div class="answer-content"></div></div>
            <div class="answer answer-d">
                <div class="box"><span class="mark"></span><span class="img"></span></div><div class="answer-content"></div></div>
            <div class="detail" style="background-color: #f2f3f8;padding: 10px;margin-left: -15px;margin-right: -15px;border: 1px solid #ddd;position: relative;">
                <span style="
                    position: absolute;
                    top: -21px;
                    left: 20px;
                    border: 10px solid transparent;
                    border-bottom-color: #ddd;
                    "></span><span style="
                        position: absolute;
                        top: -20px;
                        left: 20px;
                        border: 10px solid transparent;
                        border-bottom-color: #f2f3f8;
                        "></span>
                    <div style="font-size: 16px;text-align: center;color: #00b7ee;margin-bottom: 10px;">答案解析</div>
                    <div class="content" style="font-size: 14px;margin-bottom: 30px;"></div>
                    <div style="font-size: 15px;margin-bottom:20px;color: #ee2200;text-align: right;">
                        <span class="superMan">题目有问题？告诉超人</span>
                    </div>
            </div>
            <div style="text-align: center;padding-top: 20px;margin-left: -15px;margin-right: -15px;">
                <span class="btn end">结束</span>
                <span class="ques-num"></span>
                <span class="btn btn-blue skip">跳过</span>
                <span class="btn btn-blue confirm">确定</span>
                <span class="btn btn-blue next">下一题</span>
            </div>
        </div>
        <script type="text/javascript">
            
            /*这段代码是固定的，必须要放到js中*/
            function setupWebViewJavascriptBridge(callback) {
                if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
                if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
                window.WVJBCallbacks = [callback];
                var WVJBIframe = document.createElement('iframe');
                WVJBIframe.style.display = 'none';
                WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
                document.documentElement.appendChild(WVJBIframe);
                setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
            }
        
        setupWebViewJavascriptBridge(function(bridge) {
                                     var level = document.querySelector(".level");
                                     var jifen = document.querySelector(".jifen");
                                     var time = document.querySelector(".time");
                                     var rate = document.querySelector(".rate");
                                     
                                     var ques = document.querySelector(".question");
                                     var a = document.querySelector(".answer-a .answer-content");
                                     var b = document.querySelector(".answer-b .answer-content");
                                     var c = document.querySelector(".answer-c .answer-content");
                                     var d = document.querySelector(".answer-d .answer-content");
                                     var content = document.querySelector(".content");
                                     var answers = $(".answer");
                                     var practiceNumber =0;
                                     var practiceCount =0;
                                     
                                     var questions = [];
                                     var getQuestionArrays = [];
                                     var no = [];
                                     var skip = [];
                                     var istwo = false;
                                     var total = 0;
                                     var rightNum = 0;
                                     var totalNum = 0;
                                     var questionIndex = 0;
                                     
                                     function Timer(obj) {
                                     var self = this;
                                     this.time = 0;
                                     this.run = true;
                                     this.target = obj;
                                     setInterval(function() {
                                                 if (self.run) {
                                                 self.time += 100;
                                                 self.target.innerHTML = self.getTimeString();
                                                 }
                                                 },100)
                                     }
                                     
                                     bridge.callHandler('HUDhidden', function() {
                                                        
                                                        })
                                     
                                     Timer.prototype.getTime = function() {
                                     return this.time;
                                     }
                                     Timer.prototype.setTime = function(num) {
                                     this.run = true;
                                     this.time = num;
                                     this.target.innerHTML = this.getTimeString();
                                     }
                                     Timer.prototype.pauseTime = function() {
                                     this.run = false;
                                     }
                                     Timer.prototype.startTime = function() {
                                     this.run = true;
                                     }
                                     Timer.prototype.getTimeString = function() {
                                     var time = this.time;
                                     
                                     var m = parseInt(time/60000);
                                     var s = parseInt((time-m*60000)/1000);
                                     var ms = parseInt((time-m*60000-s*1000))/100;
                                     return (m < 10 ? "0" + m : m ) + ":" + (s < 10 ? "0" + s : s) + ":" + ms;
                                     }
                                     
                                     var timer = new Timer(time);
                                     
                                     bridge.registerHandler('getQuestionData', function(obj, responseCallback) {
                                                            
                                                            var json = obj.data;
                                                            jifen.innerHTML = json.answered_credits + "/" + json.total_credits;
                                                            rate.innerHTML = "正确率" + json.correct_rate + "%";
                                                            
                                                            total = json.total_credits;
                                                            rightNum = json.correct_count;
                                                            totalNum = json.answered_count;
                                                            
                                                            questions.push(json.question);
                                                            
                                                            showQuestion(questions,json,0);
                                                            
                                                            answers.on("click", function() {
                                                                       
                                                                       $(".next").hide();
                                                                       bridge.callHandler('tapAction', function(responseData) {
                                                                                          
                                                                                          })
                                                                       
                                                                       if ($(".right").length == 0) {$(this).addClass("active").siblings().removeClass("active");
                                                                       $(".skip").hide();
                                                                       $(".confirm").css("display","inline-block");
                                                                       }
                                                                       
                                                                       })
                                                            })
                                     
                                     function showQuestion(arr1, arr2,index) {
                                     
                                     var question = arr1[index];
                                     
                                     ques.innerHTML = question.question;
                                     a.innerHTML = question.options.A;
                                     b.innerHTML = question.options.B;
                                     c.innerHTML = question.options.C ? question.options.C : "";
                                     d.innerHTML = question.options.D ? question.options.D : "";
                                     if (question.hard === '轻松') {
                                     level.innerHTML = '轻松';
                                     $('.level-img .qingsong-img').css('display','inline-block').siblings().hide();
                                     } else if (question.hard === '简单') {
                                     level.innerHTML = '简单';
                                     $('.level-img .jiandan-img').css('display','inline-block').siblings().hide();
                                     } else if (question.hard === '困难') {
                                     level.innerHTML = '困难';
                                     $('.level-img .kunnan-img').css('display','inline-block').siblings().hide();
                                     } else if (question.hard === '疯狂') {
                                     level.innerHTML = '疯狂';
                                     $('.level-img .fengkuang-img').css('display','inline-block').siblings().hide();
                                     }else if(question.hard === '一般') {
                                     level.innerHTML = '一般';
                                     $('.level-img .jiandan-img').css('display','inline-block').siblings().hide();
                                     
                                     
                                     }
                                     $('.ques-num').html(question.disorder + '/' + arr2.total);
                                     if(question.options.D) {
                                     d.parentNode.style.display = "block";
                                     
                                     } else {
                                     d.parentNode.style.display = "none";
                                     
                                     }
                                     if(question.options.C) {
                                     c.parentNode.style.display = "block";
                                     } else {
                                     c.parentNode.style.display = "none";
                                     }
                                     
                                     content.innerHTML = question.description;
                                     
                                     switch(question.answer) {
                                     case "A":
                                     a.parentNode.classList.add("true");
                                     break;
                                     case "B":
                                     b.parentNode.classList.add("true");
                                     break;
                                     case "C":
                                     c.parentNode.classList.add("true");
                                     break;
                                     case "D":
                                     d.parentNode.classList.add("true");
                                     break;
                                     default:
                                     break;
                                     }
                                     
                                     window.updateMath("#showMath");
                                     }
                                     
                                     bridge.registerHandler('check', function(obj, responseCallback) {
                                                            var active = $(".active");
                                                            if (active.is(".true")) {
                                                            active.addClass("right").removeClass("active");
                                                            } else {
                                                            active.addClass("wrong").removeClass("active");
                                                            $(".true").addClass("right");
                                                            }
                                                            timer.pauseTime();
                                                            })
                                     
                                     function getChose() {
                                     return {
                                     answer: $(".active").eq(0)[0].className.match(/answer-[abcd]/)[0].slice(-1),
                                     timelen: parseInt(timer.getTime()/1000)
                                     }
                                     }
                                     
                                     function setChange(json) {
                                     
                                     
                                     jifen.innerHTML = json.myCredient + "/" + total;
                                     rate.innerHTML = "正确率" + Math.round(json.myCorretRote) + "%";
                                     }
                                     
                                     $(".end").on("click",function(){
                                                  bridge.callHandler('end', function(responseData) {
                                                                     
                                                                     })
                                                  })
                                     
                                     $(".skip").on("click",function(){
                                                   var data = {'currentIndex':questionIndex,'practiceNumber':practiceNumber,'practiceCount':practiceCount};
                                                   
                                                   bridge.callHandler('skip',data ,function(responseData) {
                                                                      
                                                                      })
                                                   
                                                   })
                                     
                                     $(".next").on("click",function(){
                                                   $(".detail").slideUp();
                                                   bridge.callHandler('next', function(){
                                                                      questionIndex++;
                                                                      if (istwo) {
                                                                      showQuestion(questions,null,questionIndex);
                                                                      } else {
                                                                      showQuestion(no,skip,questionIndex);
                                                                      }
                                                                      })
                                                   })
                                     
                                     $(".superMan").on("click", function() {
                                                       bridge.callHandler('superMan', function(responseData){
                                                                          
                                                                          })
                                                       
                                                       })
                                     
                                     $(".confirm").on("click",function(){
                                                      
                                                      $(this).hide();
                                                      var answerStr = JSON.stringify(getChose().answer);
                                                      var timelenStr = JSON.stringify(getChose().timelen);
                                                      var data = {'answer':answerStr, 'timelen':timelenStr};
                                                      bridge.callHandler('confirm', data, function() {
                                                                         
                                                                         })
                                                      
                                                      $(".next").css("display","inline-block");
                                                      })
                                     
                                     function commit(openOrClose){
                                     
                                     if(openOrClose) {
                                     
                                     $(".next").on("click",function(){
                                                   $(".detail").slideUp();
                                                   bridge.callHandler('next', function(){
                                                                      questionIndex++;
                                                                      if (istwo) {
                                                                      showQuestion(questions,null,questionIndex);
                                                                      } else {
                                                                      showQuestion(no,skip,questionIndex);
                                                                      }
                                                                      })
                                                   })
                                     
                                     } else {
                                     
                                     $(".next").off("click")
                                     
                                     }
                                     
                                     }
                                     
                                     bridge.registerHandler('showDetail', function(obj, responseCallback){
                                                            
                                                            $(".detail").slideDown();
                                                            setChange(obj);
                                                            
                                                            
                                                            })
                                     
                                     bridge.registerHandler('beisu', function(num, responseCallback){
                                                            $(".bg-img").css("backgroud-url","/超级课堂第二版/我的课程/做题/交互/criditsx"+num+".png").show();
                                                            var timer = setTimeout(function(){$(".bg-img").hide()},1500);
                                                            })
                                     
                                     bridge.registerHandler('nextPage',function(obj,registerHandler) {
                                                            
                                                            
                                                            
                                                            })
                                     
                                     bridge.registerHandler('enableBtn', function(obj, registerHandler){
                                                            
                                                            
                                                            
                                                            commit(true)
                                                            
                                                            })
                                     
                                     bridge.registerHandler('disableBtn', function(obj, registerHandler){
                                                            
                                                            commit(false)
                                                            
                                                            })
                                     
                                     })
            </script>
    </body>
    
</html>

